<!-- <template>
  <div>
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="会员姓名" prop="Cname">
        <el-input v-model="form.Cname" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="手机号码" prop="Phone">
        <el-input v-model="form.Phone" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="Pwd">
        <el-input v-model="form.Pwd" ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="Sex">
        <el-radio-group v-model="form.Sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="生日" prop="Birthday">
        <el-date-picker
          v-model="form.Birthday"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择生日"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>

     
      <el-form-item label="会员类型" prop="MType">
        <el-select v-model="form.MType" placeholder="请选择类型">
          <el-option v-for="(item, index) in memberTypes" :key="index" :label="item.MTname"
          :value="item.MTId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="会员积分" prop="MenberNum">
        <el-input-number 
          v-model="form.MenberNum"
          :min="0"
          :step="100"
          controls-position="right"
        ></el-input-number>
      </el-form-item>

      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="updateclient()">保 存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Edit',
  props: {
    dialogVisible: Boolean,
    store: Object
  },
  data() {
    return {
      form: {
        CId: '',
        Cname: '',
        Phone: '',
        Sex: '',
        Birthday: '',
        MType: null,
        MenberNum: 0,
        Pwd: ''
      },
      memberTypes: [],
      rules: {
        Cname: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        Sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        MenberNum: [
          { required: true, message: '积分不能为空', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ]
      }
    };
  },
  watch: {
    store: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal.CId) {
          this.initFormData(newVal);
        }
      }
    }
  },
  mounted() {
    this.loadMemberTypes();
  },
  methods: {
    initFormData(data) {
      this.form = {
        CId: data.CId,
        Cname: data.Cname,
        Phone: data.Phone,
        Sex: data.Sex,
        Birthday: data.Birthday.split('T')[0] || '',
        MType: data.MType,
        Pwd:data.Pwd,
        // MType:data.MTid,
        MenberNum: data.MenberNum
      }
      //console.log("data:"+ data.MTid);
    },
  

   
        

    async loadMemberTypes() {
      try {
        const res = await axios.get('http://localhost:21371/Api/MemberType/All');
        this.memberTypes = res.data.data || [];
      } catch (error) {
        this.$message.error('会员类型加载失败');
      }
    }
    ,

    cancel() {
      this.$emit('update:dialogVisible', false);
    }
    , async updateclient() {
      try {
        // 表单验证
        await this.$refs.formRef.validate();
        
        // 发送更新请求
        const res = await axios.post('http://localhost:21371/Api/Client/UpdateClient', this.form);
        
        if (res.data.success) {
          this.$message.success('会员信息更新成功');
          this.$emit('update:dialogVisible', false); // 关闭对话框
          // 可以在这里触发父组件的刷新或其他操作
        } else {
          this.$message.error('会员信息更新失败');
        }
      } catch (error) {
        this.$message.error('表单验证失败，请检查输入信息');
      }
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 20px;
  text-align: right;
}
.el-form {
  max-width: 500px;
  margin: 0 auto;
}
.el-input-number {
  width: 200px;
}
</style> -->
<template>
  <div>
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="会员姓名" prop="Cname">
        <el-input v-model="form.Cname" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="手机号码" prop="Phone">
        <el-input v-model="form.Phone" ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="Pwd">
        <el-input v-model="maskedPassword" readonly placeholder="显示密码"></el-input>
      </el-form-item>
      <div class="form-tip" style="color: red; font-size: 12px; margin-top: 5px;">
    会员密码仅会员本人可修改！
  </div>


      <el-form-item label="性别" prop="Sex">
        <el-radio-group v-model="form.Sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="生日" prop="Birthday">
        <el-date-picker
          v-model="form.Birthday"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择生日"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="会员类型" prop="MType">
        <el-select v-model="form.MType" disabled  placeholder="请选择类型">
          <el-option v-for="(item, index) in memberTypes" :key="index" :label="item.MTname"
          :value="item.MTId"></el-option>
        </el-select>
      </el-form-item>

               <!-- 新增提示文字 -->
  <div class="form-tip" style="color: red; font-size: 12px; margin-top: 5px;">
    会员类型和积分不可修改由系统自动判定，请谨慎操作！
  </div>

        <el-form-item label="会员积分" prop="Phone">
        <el-input v-model="form.MenberNum" :disabled="true"></el-input>
 
     
      </el-form-item>

      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="updateclient()">保 存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Edit',
  props: {
    dialogVisible: Boolean,
    store: Object
  },
  data() {
    return {
      form: {
        CId: '',
        Cname: '',
        Phone: '',
        Sex: '',
        Birthday: '',
        MType: null,
        MenberNum: 0,
        Pwd: ''
      },
      memberTypes: [],
      rules: {
        Cname: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        Sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        MenberNum: [
          { required: true, message: '积分不能为空', trigger: 'blur' },
          { type: 'number', message: '必须为数字值' }
        ], Phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入有效的手机号',
            trigger: 'blur'
          }
        ],
        Birthday: [{ required: true, message: '请选择生日', trigger: 'change' }]
      }
    };
  },
  computed: {
    maskedPassword() {
      if (this.form.Pwd) {
        return this.form.Pwd.replace(/./g, '*');
      }
      return '';
    }
  },
  watch: {
    store: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal.CId) {
          this.initFormData(newVal);
        }
      }
    }
  },
  mounted() {
    this.loadMemberTypes();
  },
  methods: {
    initFormData(data) {
      this.form = {
        CId: data.CId,
        Cname: data.Cname,
        Phone: data.Phone,
        Sex: data.Sex,
        Birthday: data.Birthday.split('T')[0] || '',
        MType: data.MType,
        Pwd: data.Pwd,
        MenberNum: data.MenberNum
      };
    },

    async loadMemberTypes() {
      try {
        const res = await axios.get('http://localhost:21371/Api/MemberType/All');
        this.memberTypes = res.data.data || [];
      } catch (error) {
        this.$message.error('会员类型加载失败');
      }
    },

    cancel() {
      this.$emit('update:dialogVisible', false);
    },

    async updateclient() {
      console.log(this.form);
      try {
        // 表单验证
        await this.$refs.formRef.validate();
        
        // 发送更新请求
        const res = await axios.put('http://localhost:21371/Api/Client/UpdateClient', this.form);
        
        if (res.data.code>0) {
          this.$message.success('会员信息更新成功');
          this.$emit('update:dialogVisible', false); // 关闭对话框
          // 可以在这里触发父组件的刷新或其他操作
          this.$emit('refresh')
        } else {
          this.$message.error('会员信息更新失败');
        }
      } catch (error) {
        this.$message.error('表单验证失败，请检查输入信息');
      }
  }}
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 20px;
  text-align: right;
}
.el-form {
  max-width: 500px;
  margin: 0 auto;
}
.el-input-number {
  width: 200px;
}
</style>
